import React, { Component } from 'react';
import moment from "moment"
class Lifecrcle extends Component {
    //状态   数据驱动视图
    state = {
        time:moment().format("YYYY-MM-DD HH:mm:ss")
    }

    //创建  定时器
    timeintval = null;

    //组件完成挂载执行
    componentDidMount(){
        //创建定时器
        this.timeintval = setInterval(()=>{
            this.setState({
                time:moment().format("YYYY-MM-DD HH:mm:ss")
            })

            console.log("我在执行定时器~~~");

        },1000)
    }

    //  组件在更新时,先卸载老的组件,然后重新渲染新得组件

    //组件将要卸载时执行,     清除定时器
    componentWillUnmount(){
        console.log("组件将要卸载时执行");
        clearInterval(this.timeintval);
    }

    render() {

        return (
            <>
                <h1>生命周期组件~~~~~~</h1>
                <div style={{width:"500px",height:"100px",border:"1px solid gray",fontSize:"30px",textAlign:"center",lineHeight:"100px"}}>{this.state.time}</div>

            </>
        );
    }
}

export default Lifecrcle;